<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="100px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm">
            <div class="box">
                <div class="appTitle">验证码查询</div>
                <div>
                    <div class="appTop">
                        <i class="tag"></i>
                        <P>查询条件</p>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="9">
                            <el-form-item label="手机号" prop="phone">
                                <el-input v-model="ruleForm.phone" placeholder="请输入需要查询的手机号" 
                                :maxlength="11"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item >
                                 <el-button type="primary" @click="search('ruleForm')">查询</el-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>  
                <div class="appTop">
                    <i class="tag"></i>
                    <P>查询结果
                    </p>
                </div>
                <el-row :gutter="20">
                    <el-col :span="9">
                        <el-form-item label="手机号：">
                            <span>{{searchPhone}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="验证码：">
                            <span>{{searchCode}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>
<script>
import Levelbar from '../../layout/Levelbar';
import {sphonecode} from 'api/system';

export default {
    components: { Levelbar},
    data() {
        return {
            rules: {
                phone: [
                    { pattern: /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/,
                        message: '请输入正确的联系方式', trigger: 'blur' },
                    { required: true, message: '请输入手机号码！', trigger: 'blur' }
                ]
            },
            ruleForm: {
                phone: ''
            },
            searchPhone: '',
            searchCode: ''

        }
    },
    methods: {
        search(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {// 验证通过
                    let phoneNumber=this.ruleForm.phone;
                    sphonecode(phoneNumber).then(res => {
                        if (res.data.status==200) {
                            this.$message({
                                type: 'success',
                                message: '查询成功!'
                            });
                        }
                        this.searchPhone=phoneNumber;
                        if (res.data.content) {
                            this.searchCode=res.data.content
                        }
                    });
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
div {
    padding-left: 0px !important;
}


.search-phone,.search-indentify{
  border:none !important;
  .el-input__inner{
    border:none !important;
  }
}
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form {
        padding-Top: 30px;
        background: #fff;
        padding-bottom: 170px;
        padding-left: 30px;
        padding-right: 30px;
        .appTop {
            padding: 40px 0 30px 0px;
            margin-bottom: 30px;
            position: relative;
        }
        .appTop p {
            margin-left: 15px;
        }
        .tag {
            width: 4px;
            height: 20px;
            display: inline-block;
            background: #ff5e2c;
            margin-top: 2px;
            position: absolute;
        }
        .appTitle {
            padding: 40px 0 30px 50px;
            margin-bottom: 30px;
            padding-top: 10px;
            text-align: center;
            border-bottom: 1px solid #ECECEC;
            font-weight: 700;
        }
        .box {
            // margin-left: 20px;
            padding-bottom: 10px;
            background: #fff;
        }
        .el-tag {
            margin-left: 10px;
            background: #f9f9f9;
            color: #444;
        }
        .footer {
            text-align: center;
            margin-top: 40px;
        }
    }
    .delBtn {
        display: inline-block;
        height: 36px;
        width: 16px;
        line-height: 36px;
        i {
            cursor: pointer;
        }
    }
}
</style>
